<template>
  <div id="add">
    <el-dialog :title="obj.isadd?'菜单添加':'菜单修改'" :visible.sync="obj.istrue" width="50%"
    @close="cancel">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        style="width: 45%; background: #fff"
      >
        <el-form-item label="菜单名称">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select v-model="form.pid" placeholder="请选择" @change="selectpid">
            <el-option label="顶级菜单" :value=0></el-option>
            <el-option v-for="item in menulist" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型">
            <el-radio :label="1" v-model="form.type" disabled>目录</el-radio>
            <el-radio :label="2" v-model="form.type" disabled>菜单</el-radio>
        </el-form-item>
        <el-form-item label="菜单图标" v-show="form.type==1">
          <el-select v-model="form.icon" placeholder="请选择菜单图标">
            <el-option v-for="(item,index) in iconArr" :key="index" :value="item">
              <i :class="item"></i>
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="菜单地址" v-show="form.type==2">
          <el-select v-model="form.url" placeholder="请选择地址">
            <el-option v-for="(item,index) in secondRouter" :key="index"
            :label="item.meta.title" :value="'/'+item.path"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitadd" v-if="obj.isadd">确 定</el-button>
        <el-button type="primary" v-else @click="edit">修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { successAlert,warningAlert } from "../../../util/alert.js"
import {mapActions,mapGetters} from "vuex"
import {secondRouter} from "../../../router/index"
import {menuadd,menuinfo,menuedit} from "../../../requset/api"
export default {
  props:["obj"],
  data() {
    return {
      form: {
        pid:0,
        title:"",
        icon:"",
        type:1,
        url:"",
        status:1,
        id:0,
      },
       iconArr:["el-icon-eleme","el-icon-help","el-icon-picture-outline-round","el-icon-video-camera","el-icon-date"],
       secondRouter:secondRouter,
    };
  },
  computed: {
    ...mapGetters({
      menulist:"menu/list"
    }),
  },
  methods: {
    ...mapActions({
      reqChangeMenu:"menu/reqChangeMenu"
    }),
    selectpid(){
      if(this.form.pid==0){
        this.form.type=1
        this.form.url=""
      }else{
        this.form.type=2
        this.form.icon=""
      }
    },
    emty(){
      this.form={
        pid:0,
        title:"",
        icon:"",
        url:"",
        status:1,
        type:1,
        id:0
      }
    },
    cancel(){
      this.obj.istrue=false,
      this.obj.isadd=true,
      this.emty()
    },
    submitadd(){
      console.log(this.form);
      menuadd(this.form).then(res=>{
        if(res.data.code==200){
           successAlert(res.data.msg)
           this.cancel()
           this.reqChangeMenu()
        }else{
          warningAlert(res.data.msg)
        }
      })
    },
    getone(id){
      menuinfo({id:id}).then(res=>{
        this.form=res.data.list
        this.form.id=id
      })
    },
    edit(){
      menuedit(this.form).then(res=>{
        if(res.data.code==200){
          successAlert(res.data.msg)
           this.cancel()
           this.reqChangeMenu()
        }else{
          warningAlert(res.data.msg)
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
</style>